<template>
  <div class="announcement-list">
    <div class="notice-card-container notice-card-list">
      <notice-card v-for="info in tableData.list"
                   :content="info.title"
                   :time="info.createTime"
                   :title="info.mainTitle"
                   :key="info.noticeId"
                   :readable="false"
      >
        <svg-icon slot="badge" icon-class="loudspeaker"></svg-icon>
      </notice-card>
    </div>
    <div class="el-pagination-container">
      <el-pagination
        bordered
        layout="prev, pager, next"
        @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-size="filters.size"
                     :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import {grid} from '@/build';
  import NoticeCard from './notice-card';

  import {
    userNoticeListApi as getApi,
  } from '@/services/api/notice';

  // import {
  //   userNoticeNewApi as getApi,
  // } from '@/services/api/notice';

  export default {
    name: "system-notice-list",

    mixins: [grid],

    components: {
      NoticeCard
    },

    data () {
      return {
        filters: {
          size: 8,
          page: 1,
        },
        tableData: {
          total: 0,
        }
      };
    },
    watch: {
      noticeList(currentList, prevList) {
        if (currentList.length) {
          this.getAll();
        }
      }
    },

    computed: {
      ...mapState({
        noticeList: state => state.notice.noticeList
      })
    },

    mounted() {
      this.bindGet(getApi, 'tableData', {
        action: 'getGrid',
        sendingData: 'filters',
        format:(data) => {
          _.each(data.list, info => {
            // if (info.type === consts.NOTICE_CHARGE || info.type === 10) {
            //   info.mainTitle = '充值到账通知';
            // } else {
            //   info.mainTitle = '提现到账通知';
            // }
            info.mainTitle = '系统消息';
          });

          return data;
        }
      });

      this.getAll();
    }
  };
</script>

<style lang="scss" scoped>
</style>